<template>
  <div class="category_page">
    <div class="add_category">
      <el-button @click="getAllcategory" type="primary">新增分类</el-button>
    </div>
    <Table
      align="center"
      border
      @click="handleClick"
      :tableData="tableData"
      :tableCols="tableCols"
      :tabelOption="tabelOption"
    />
    <!-- 新增对话框 -->
    <Dialog title="新增分类" :visible="visible" :showClose="false">
      <div slot="content">
        <el-form
          :model="ruleForm"
          :rules="rules"
          ref="ruleForm"
          label-width="100px"
          class="demo-ruleForm"
        >
          <el-form-item label="名称" prop="name">
            <el-input v-model="ruleForm.name"></el-input>
          </el-form-item>
          <el-form-item label="位置" prop="address">
            <el-select
              v-model="ruleForm.address"
              placeholder="请选择"
              v-if="!isAdd"
            >
              <el-option
                v-for="item in addressList"
                :key="item.id"
                :label="item.name"
                :value="item.name"
              >
              </el-option>
            </el-select>
            <el-input v-model="ruleForm.address" v-else></el-input>
            <el-button @click="isAdd = !isAdd" type="danger">{{
              isAdd ? "完成" : "新增位置"
            }}</el-button>
          </el-form-item>
          <el-form-item label="所有类型">
            <ul>
              <li v-for="item in ruleForm.list" :key="item.id">
                <span class="el-icon-error"></span>
                {{ item.name }}
              </li>
            </ul>
          </el-form-item>
        </el-form>
      </div>
      <div slot="footer">
        <el-button type="info" @click="visible = false">取消</el-button>
        <el-button type="primary" @click="handleAffirm">确认</el-button>
      </div>
    </Dialog>
    <!-- 编辑对话框 -->
    <Dialog
      title="编辑分类"
      :visible="editVible"
      align="center"
      :showClose="false"
    >
      <div slot="content" class="editDialog">
        <div class="item">
          <span>主题名称:</span>
          <el-input
            placeholder="请填写当前的主题名称"
            v-model="edit_list.name"
          ></el-input>
        </div>
        <div class="item">
          <span>位置:</span>
          <el-select v-model="edit_list.address" placeholder="请选择">
            <el-option
              v-for="item in addressList"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            >
            </el-option>
          </el-select>
        </div>
      </div>
      <div slot="footer">
        <el-button type="info" @click="editVible = false">取消</el-button>
        <el-button type="primary" @click="affirmEdit">确认</el-button>
      </div>
    </Dialog>
    <!-- 编辑删除框 -->
    <Dialog title="删除分类" :visible="delVible" align="center" :showClose="false">
      <div slot="content">是否删除该分类</div>
      <div slot="footer">
        <el-button type="info" @click="delVible = false">取消</el-button>
        <el-button type="danger" @click="affirmDel">确认</el-button>
      </div>
    </Dialog>
  </div>
</template>
<script>
import Table from "@/components/Table";
import Dialog from "@/components/Dialog";
import {
  getcategory,
  addCategory,
  all_adress,
  editcategory,
  delete_category,
} from "@/api/category";
export default {
  props: {},
  components: {
    Table,
    Dialog,
  },
  data() {
    return {
      visible: false, // 分类弹框
      editVible: false, // 编辑对话
      delVible: false, // 删除分类对话框
      addressList: [], // 位置列表
      isAdd: false, // 是否添加位置
      ruleForm: {
        name: "", // 名称
        address: "", // 位置
        list: [],
      },
      edit_list: {}, // 编辑列表
      del_list:{}, // 删除列表
      tableData: [], // 列表数据
      tableCols: [
        { prop: "id", label: "id", width: "90px" },
        { prop: "name", label: "主题名称" },
        { prop: "address_name", defined: true, label: "位置", option: "tag" },
      ],
      tabelOption: [
        {
          label: "操作",
          oper: [
            { clickFun: "handleEdit", name: "编辑", style: "success" },
            { clickFun: "handleDele", name: "删除", style: "danger" },
          ],
        },
      ],
      rules: {
        name: [{ required: true, message: "请输入活动名称", trigger: "blur" }],
      },
    };
  },
  methods: {
    // 点击表格中的按钮
    handleClick(val) {
      val.method === "handleEdit"
        ? this.handleEdit(val.row)
        : this.handleDele(val.row);
    },
    // 点击新增分类确认按钮
    handleAffirm() {
      addCategory({
        typeid: "1",
        T_name: this.ruleForm.name,
        address: this.ruleForm.address,
      }).then((res) => {
        if (res.code == 0) {
          this.$message({
            type: "success",
            message: res.msg,
          });
          this.categroyList();
          this.visible = false;
          this.ruleForm.name =''
        }
      });
    },
    // 点击新增分类
    getAllcategory() {
      this.visible = true;
    },
    // 获取分类列表数据
    categroyList() {
      getcategory({ type: "1" }).then((res) => {
        if (res.code == 0) {
          this.ruleForm.list = res.data;
          this.tableData = res.data;
        }
      });
    },
    // 点击删除按钮
    handleDele(val) {
     this.delVible = true
     this.del_list = val
    },
    //  点击编辑按钮
    handleEdit(val) {
      this.editVible = true;
      this.edit_list = val;
    },
    // 点击确认编辑按钮
    affirmEdit() {
      let { id, address, name } = this.edit_list;

      let data = {
        id,
        type_id: 1,
        name,
        address,
      };
      editcategory(data).then((res) => {
        if (res.code == 0) {
          this.$message({
            type: "success",
            message: res.msg,
          });
        }
        this.editVible = false;
        this.categroyList();
      });
    },
    affirmDel() {
      delete_category({ T_id: this.del_list.id, type: 1 }).then((res) => {
        if(res.code==0){
          this.delVible = false
          this.categroyList() 
        }
      });

    },
    // 获取所有分类位置列表
    address_list() {
      all_adress({ type: 1 }).then((res) => {
        this.addressList = res.result;
      });
    },
  },
  mounted() {
    this.categroyList();
    this.address_list();
  },
  watch: {},
  computed: {},
  filters: {},
};
</script>
<style lang="scss" scoped>
.add_category {
  text-align: right;
  margin: 20px 0;
}
.demo-ruleForm {
  ul {
    border: 1px solid #ddd;
    min-height: 150px;

    li {
      position: relative;
      margin: 10px 10px 10px 0;
      border: 1px solid #ddd;
      list-style: none;
      padding: 0px 4px;
      display: inline-block;

      span {
        position: absolute;
        right: -8px;
        top: -6px;
      }
    }
  }
}
.editDialog {
  .item {
    display: flex;
    align-items: center;
    margin: 30px 0;
    span {
      margin-right: 14px;
      text-align: right;
      width: 90px;
    }
  }
}
</style>
